/*
 * @description: 上传视频
 * @Author: along
 * @Date: 2021-03-15
 * @Last Modified by: along
 * @Last Modified time: 2021-03-22
 */
<template>
    <div class="container uploadInfo">
        <div class="header">
            <div class="nav">
                <p class="nav_title">基础信息</p>
                <p class="nav_back" @click="() => {
                    this.$router.push({
                        name: 'Index'
                    })
                }">返回</p>
            </div>
            <div class="view">
                <div class="view_item">
                    批次组名称: <p class="view_content">{{ pageInfo.title ? pageInfo.title : '--' }}</p>
                </div>
                <div class="view_item">
                    寝室性别: <p class="view_content">{{ pageInfo.series_sex | filterSex }}</p>
                </div>
                <div class="view_item">
                    视频数量: <p class="view_content">{{ video_num ? video_num : 0 }}</p>
                </div>
                <div class="view_item" v-if="TYPE !== 'upload'">
                    学校名称: <p class="view_content">{{ pageInfo.series_school_name ? pageInfo.series_school_name : '--' }}</p>
                </div>
                <div class="view_item" v-if="TYPE !== 'upload'">
                    公司名称: <p class="view_content">{{ info.company_name ? info.company_name : '--' }}</p>
                </div>
                <div class="view_item" v-if="TYPE !== 'upload'">
                    视频批次: <p class="view_content">{{ info.series_index ? info.series_index : '--' }}</p>
                </div>
            </div>
        </div>
        <div :style="{width: '100%', minHeight: '12px', background: 'rgba(240, 242, 245, 1)'}"></div>

        <!-- 批次信息 -->
        <div class="_batch" v-if="TYPE == 'upload'">
            <div class="_batch_header">
                <p class="_batch_title">批次信息</p>
                <p class="_bacth_desc">(上传的视频将会同步到以下列表批次中)</p>
            </div>
            <div class="_bacth_box" :style="{height: `${97 + (hireList.length - 1) * 55}px`}">
                <el-table
                    :data="hireList"
                    height="100%"
                    style="width: 100%;height:100%"
                    border
                >
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                    />
                    <el-table-column
                        prop="company_name"
                        label="公司名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    />
                    <el-table-column
                        prop="series_index"
                        label="视频批次"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    />
                    <el-table-column
                        prop="series_title"
                        label="产品名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    />
                </el-table>
            </div>
            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :current-page.sync="page_hire.now_page"
                    :total="page_hire.total_count"
                    :page-size="page_hire.page_size"
                    @current-change="getHireList"
                />
            </div>
        </div>
        <div :style="{width: '100%', minHeight: '12px', background: 'rgba(240, 242, 245, 1)'}"></div>

        <!-- 上传视频 -->
        <div class="main">
            <p class="main_title">上传视频</p>
            <div class="filter">
                <div class="filter_left">
                    <div class="filter_group_box">
                        <el-radio-group
                            v-model="formData.status"
                            size="small"
                            @change="getTableData(1)"
                            :style="{marginTop: '24px', display: 'flex'}"
                        >
                            <el-radio-button :label="0">待提审</el-radio-button>
                            <el-radio-button :label="1">待审核</el-radio-button>
                            <el-radio-button :label="2">已通过</el-radio-button>
                            <el-radio-button :label="-1">未通过</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="header_box">
                        <p class="header_box_title">排序规则:</p>
                        <el-select
                            v-model="formData.sort_type"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in sortList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="header_box">
                        <p class="header_box_title">视频名称:</p>
                        <el-input
                            v-model="formData.video_name"
                            placeholder="请输入视频名称"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getTableData(1)"
                            @keyup.native.enter="getTableData(1)"
                            :style="{width: '202px'}"
                        />
                    </div>
                </div>
                <div class="filter_right" v-if="isNone">
                    <div class="header">
                        <div class="header-wrap">
                            <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                accept="video/*"
                                :multiple="true"
                                :limit="20"
                                :file-list="fileList"
                                :show-file-list="false"
                                :http-request="fnUploadFile"
                                :on-change="fnChangeUpload"
                                :on-exceed="beforeUploadExcwwd"
                                :disabled="pageInfo.status == 2 || pageInfo.status == -1 ? true : false"
                            >
                                <el-button
                                    size="small"
                                    type="primary"
                                    :style="{marginTop: '24px'}"
                                    :disabled="pageInfo.status == 2 || pageInfo.status == -1 ? true : false"
                                >
                                    {{ pageInfo.status == 2 ? '已完成任务' : pageInfo.status == -1 ? '未完成任务' : '上传视频' }}
                                </el-button>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
            <div class="__success" v-if="formData.status === 2">
                <el-radio-group v-model="formData.score" @change="getTableData()">
                    <el-radio :label="99">全部</el-radio>
                    <el-radio :label="1">低于预期(1)</el-radio>
                    <el-radio :label="2">符合预期(2)</el-radio>
                    <el-radio :label="3">超预期(3)</el-radio>
                    <el-radio :label="5">远超预期(5)</el-radio>
                </el-radio-group>
            </div>
            <!-- 视频展示 -->
            <div
                class="upload"
                v-loading="loading"
            >
                <template v-if="tableData.length">
                    <div
                        class="_wrap"
                    >
                        <!-- :style="{height: formData.status === 2 ? `calc(100vh - 517px)` : `calc(100vh - 477px)`}" -->
                        <div
                            v-for="(row,index) in tableData"
                            :key="index"
                            class="_item"
                            :id="'playVideo' + index"
                            :style="{height: row.student_audit_status === 2 ? '208px' : row.student_audit_status === -1 ? '295px' : '252px'}"
                            @click="playVideo(row, index)"
                        >
                            <div
                                class="_item_video"
                                :style="{backgroundImage: `url(${row.video_cover})`, backgroundSize: 'cover'}"
                            >
                                <!-- <img :src="row.video_cover" class="_item_video_cover"> -->
                                <img src="@/assets/image/video-controls-play.png" class="_item_video_play">
                                <p
                                    class="icon_wrap"
                                    v-if="!!row.flag"
                                    v-show="row.student_audit_status === 0 || row.student_audit_status === -1"
                                    @click.stop="handleCheckData(row)"
                                >
                                    <i class="iconfont icon-check_sel"></i>
                                </p>
                                <i
                                    class="iconfont icon-check_def"
                                    v-if="!row.flag"
                                    v-show="row.student_audit_status === 0 || row.student_audit_status === -1"
                                    @click.stop="handleCheckData(row)"
                                />
                            </div>
                            <p class="_item_title">{{ row.video_name }}</p>
                            <div class="_item_info" :style="{marginBottom: row.student_audit_status === 1 ? '12px' : '12px'}">
                                <p class="_item_info_size">{{ row.video_size | filterSize }}</p>
                                <p class="_item_info_date">{{ row.upload_time * 1000 | dateFormatter('yyyy/MM/dd') }}上传</p>
                            </div>
                            <!-- 未通过原因 -->
                            <p class="_item_error_text" v-if="row.student_audit_status === -1">未通过的原因:{{ row.student_audit_reason }}</p>
                            <!-- 待提审(待提审/未通过) -->
                            <template v-if="row.student_audit_status === 0 || row.student_audit_status === -1">
                                <div class="_item_button">
                                    <p
                                        class="_item_delete"
                                        @click.stop="handleDeleteVideo(row)"
                                        :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                    >删除</p>
                                    <!-- <p class="_item_next" @click.stop="handleNextVideo(row)">重新上传</p> -->
                                    <div class="_item_next" @click.stop="stop(row)">
                                        <div class="header-wrap">
                                            <el-upload
                                                class="upload-demo"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                accept="video/*"
                                                :multiple="false"
                                                :limit="1"
                                                :file-list="fileList"
                                                :show-file-list="false"
                                                :http-request="fnUploadFile"
                                                :on-change="fnChangeUploadNext"
                                                :on-exceed="beforeUploadExcwwd"
                                            >
                                                <el-button
                                                    size="small"
                                                    type="text"
                                                    :disabled="TYPE == 'check' ? true : false"
                                                >
                                                    重新上传
                                                </el-button>
                                            </el-upload>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <!-- 待审核 -->
                            <template v-if="formData.status === 1">
                                <p class="_item_await">
                                    等待审核...
                                </p>
                            </template>
                        </div>
                    </div>
                </template>
                <template v-if="!tableData.length">
                    <p class="upload_data">
                        暂无数据
                    </p>
                </template>
            </div>

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix" v-if="isNone">
                <el-checkbox
                    v-model="checkedAll"
                    @change="fnChangeChecked"
                    v-if="formData.status === 0 || formData.status === -1"
                >当页全选</el-checkbox>
                <!-- 待提审展示 -->
                <el-button
                    type="text"
                    :disabled="multipleSelection.length == 0 ? true : false"
                    :style="{marginLeft: '24px', pointerEvents: TYPE == 'check' ? 'none' : ''}"
                    v-if="formData.status === 0"
                    @click="handleSubmitAll()"
                >批量提交审核</el-button>
                <!-- 待提审/未通过展示 -->
                <el-button
                    type="text"
                    :disabled="multipleSelection.length == 0 ? true : false"
                    :style="{marginLeft: '24px', pointerEvents: TYPE == 'check' ? 'none' : ''}"
                    v-if="formData.status === 0 || formData.status === -1"
                    @click="handleDeleteAll()"
                >批量删除</el-button>
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>

            <!-- 视频播放组件 -->
            <video-simple
                ref="videoSimple"
                :url="url"
                :top="top"
                :left="left"
            />

            <!-- 视频上传 -->
            <video-upload
                ref="videoUpload"
                :limit="LIMIT"
                @success="success"
                @clear="clearFileList"
            />

            <!-- 删除视频弹窗 -->
            <delete-dialog
                :dialog="dialogDelete"
                :width="360"
                :title="''"
                :center="true"
                class="__dialog"
            >
                <div class="_dialog">
                    <img src="@/assets/image/dialog_logo.png" class="_dialog_logo">
                    <p class="_dialog_title">确认删除该视频</p>
                    <p class="_dialog_desc">删除之后不可以撤销</p>
                    <div class="_dialog_foot">
                        <el-button
                            size="medium"
                            type="default"
                            :style="{width: '120px', marginRight: '32px'}"
                            @click="dialogDelete = false"
                        >
                            取消
                        </el-button>
                        <el-button
                            size="medium"
                            type="primary"
                            :style="{width: '120px'}"
                            @click="handleConfirmDeleteVideo()"
                        >
                            确定
                        </el-button>
                    </div>
                </div>
            </delete-dialog>
        </div>
    </div>
</template>

<script>
import videoSimple from '@/components/common/video-simple.vue';
import videoUpload from '@/components/student-video-upload/video-upload.vue';
import deleteDialog from '@/components/common/dialog.vue';
export default {
    components: {
        videoSimple,
        videoUpload,
        deleteDialog
    },
    data () {
        return {
            //全局
            series_no: '',
            TYPE: '',//upload:上传 check:查看
            video_no: '',//记录视频编号
            video_num: 0,//视频数量
            //基础字段
            pageInfo: {
                title: '',
                series_sex: '',
                series_school_name: ''
            },
            TASK_STATUS: false,//任务状态 false: 未完成 true: 已完成
            checkedAll: false,//是否全选
            checkData: {
                multipleSelection: []
            },//选择数据做缓存
            multipleSelection: [],
            formData: {
                status: 0, //99:全部,0:待提审,1:待审核,-1:审核不通过,2:审核通过
                sort_type: 0,
                video_name: '',
                score: 99,//99:全部 1:低于预期 2:符合预期 3:超预期 5:远超预期
            },
            sortList: [{value: 0, label: '更新时间'},{value: 1, label: '视频大小'},{value: 2, label: '视频时长'}],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            //视频播放
            left: 0,//视频组件右边距
            top:0,
            url: '',
            //视频上传
            LIMIT: 20,
            fileList: [],
            vType: '',//1:直接上传 2:重新上传
            // 删除弹窗相关
            dialogDelete: false,
            isAll: false,//是否批量删除
            //loading
            loading: false,
            // 批次信息
            //公司列表
            hireList: [],
            page_hire: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            info: {
                company_name: '',
                series_index: ''
            },
            isNone: true,//是否隐藏上传视频按钮 //查看详情进入隐藏
        };
    },
    filters: {
        filterSex (val) {
            if(val === 0) return '不限';
            if(val === 1) return '男';
            if(val === 2) return '女';
            return '--';
        },
        filterSize (val) {
            return (val / 1024 / 1024).toFixed(2) + 'M';
        }
    },
    mounted () {
        this.series_no = this.$route.query.series_no ? this.$route.query.series_no : '';
        this.TYPE = this.$route.query.type ? this.$route.query.type : '';//upload:上传 check/error:查看
        this.info = this.$route.query.info ? JSON.parse(this.$route.query.info) : {
            company_name: '',
            series_index: ''
        };
        this.isNone = this.$route.query.info ? false : true;
        this.$store.commit('header/SET_HEADER', [{ title: "寝室视频上传", path: '/'}, { title: "上传视频"}]);
        this.getTableData();
        this.getInfo();
        this.getVideoLength();
        this.getHireList();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.loading = true;
            this.$post('/stuhire_room_series/SeriesVideo/getList', {
                page_id: page || this.page.now_page,
                series_no: this.series_no,
                video_name: this.formData.video_name,
                student_audit_status: this.formData.status,
                score: this.formData.status === 2 ? this.formData.score : 99,
                sort_field: this.formData.sort_type,
                sort_type: 0
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                    // 重置数据
                    this.multipleSelection = [];
                    this.tableData.forEach(el => {
                        this.$set(el, 'flag', false);
                    });
                    this.checkedAll = false;

                    // 排序处理
                    // this.tableData.sort((a,b) => {
                    //     return a['video_name'].localeCompare(b['video_name']);
                    // });

                    setTimeout(() => {
                        this.loading = false;
                    },300);
                }
            });
        },

        /**
         * @description 获取视频数量
         */
        getVideoLength () {
            this.$post('/stuhire_room_series/SeriesVideo/getList', {
                page_id: 1,
                series_no: this.series_no,
                video_name: '',
                student_audit_status: 99,
                score: 99,
                sort_field: 0,
                sort_type: 0
            }, resp => {
                if (resp.code == 1) {
                    this.video_num = resp.data.page.total_count;
                }
            });
        },

        /**
         * @description 获取基础信息数据
         */
        getInfo () {
            this.$post('/stuhire_room_series/Series/getInfo', {
                series_no: this.series_no
            }, resp => {
                if (resp.code == 1) {
                    this.pageInfo = {
                        ...resp.data
                    };
                }
            });
        },

        /**
         * @description 获取基础信息数据
         */
        getHireList (page) {
            this.$post('/stuhire_room_series/Series/getLinkHireList', {
                series_no: this.series_no,
                page_id: page || this.page.now_page,
            }, resp => {
                if (resp.code == 1) {
                    this.hireList = resp.data.list;
                    this.page_hire.now_page = resp.data.page.now_page;
                    this.page_hire.total_count = resp.data.page.total_count;
                    this.page_hire.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 单选
         *  video_no
         */
        handleCheckData (row) {
            if(!row.flag) {
                this.$set(row, 'flag', true);
                this.multipleSelection.push(row.video_no);//缓存id 到时候修改
                this.checkData['multipleSelection'][this.page.now_page - 1] = JSON.parse(JSON.stringify(this.multipleSelection));
            } else {
                this.$set(row, 'flag', false);
                this.multipleSelection.splice(this.multipleSelection.indexOf(row.video_no), 1);
                this.checkData['multipleSelection'][this.page.now_page - 1] = JSON.parse(JSON.stringify(this.multipleSelection));
            }
            this.checkedAll = this.multipleSelection.length === this.tableData.length ? true : false;// 是否全选状态

            console.log('multipleSelection', this.multipleSelection, this.checkData['multipleSelection'][this.page.now_page - 1]['length']);
        },

        /**
         * @description 全选
         */
        fnChangeChecked () {
            if(this.checkedAll) { //全选
                this.multipleSelection = this.tableData.reduce((cur,next) => {
                    next.flag = true;
                    cur.push(next.video_no);
                    return cur;
                },[]);
                this.checkData['multipleSelection'][this.page.now_page - 1] = JSON.parse(JSON.stringify(this.multipleSelection));
            } else { //取消全选
                this.tableData.forEach(el => {
                    this.$set(el, 'flag', false);
                });
                this.multipleSelection = [];
                this.checkData['multipleSelection'][this.page.now_page - 1] = [];
            }

            console.log('multipleSelection', this.multipleSelection);
        },

        /**
         * @description 播放视频
         */
        playVideo (row, index) {
            this.left = document.querySelector('#playVideo' + index).getClientRects()[0].x - 220;
            this.top = document.querySelector('#playVideo' + index).getClientRects()[0].y - 370;
            this.url = row.video_url;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * @description 批量提交视频
         */
        handleSubmitAll () {
            console.log('multipleSelection', this.multipleSelection);
            if(!this.multipleSelection.length) {
                this.$notify({
                    title: '提示',
                    message: '请先选择视频',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('是否要批量提交审核？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let video_nos = this.multipleSelection.reduce((cur,next) => {
                    cur.push(next);
                    return cur;
                },[]).join();

                this.$post('/stuhire_room_series/Series/submitAudit', {
                    series_no: this.series_no,
                    video_nos: video_nos
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '提交成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });

        },

        /**
         * @description 批量删除
         */
        handleDeleteAll () {
            console.log('multipleSelection', this.multipleSelection);
            if(!this.multipleSelection.length) {
                this.$notify({
                    title: '提示',
                    message: '请先选择视频',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.isAll = true;//记录状态
            this.$confirm('是否要批量删除视频？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.multipleSelection.forEach(video_no => {
                    this.$post('/stuhire_room_series/SeriesVideo/delete', {
                        series_no: this.series_no,
                        video_no: video_no
                    }, resp => {
                        if (resp.code == 1) {
                            //
                        }
                    });
                });

                setTimeout(() => {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                },500);
            });
        },

        /**
         * @description 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用(直接上传)
         */
        fnChangeUpload (file, fileList) {
            this.vType = 1;
            this.fileList = fileList;
        },

        /**
         * @description 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用(重新上传)
         */
        fnChangeUploadNext (file, fileList) {
            this.vType = 2;
            this.fileList = fileList;
        },

        /**
         * @description 文件超出个数限制时的钩子
         */
        beforeUploadExcwwd (files, fileList) {
            this.$notify({
                title: '提示',
                message: `最多一次只可以上传${this.LIMIT}个视频`,
                type: 'warning',
                duration: 2000
            });
            return false;
        },

        /**
         * @description 清空上传视频旧数据
         */
        clearFileList () {
            console.log('@@@清空旧数据@@@');
            this.fileList = [];
        },

        /**
         * @description 获取视频上传信息，处理上传
         */
        fnUploadFile (event) {
            console.log('event', event, this.fileList);
            this.$refs.videoUpload.showUpload({
                event: event,
                fileList: this.fileList
            });

            if(this.vType == 1) { //上传视频
                this.handleUploadVideo();
            } else if (this.vType == 2) { //重新上传视频
                this.handleNextVideo();
            }
        },


        /**
         * @description 上传视频
         */
        handleUploadVideo () {
            this.LIMIT = 20;
            this.$refs.videoUpload.show();
        },

        /**
         * @description 重新上传视频
         */
        handleNextVideo () {
            this.LIMIT = 1;
            this.$refs.videoUpload.show();
        },

        /**
         * @description 视频上传成功
         */
        success (list) {
            console.log(list, '上传完成');

            const self = this;
            let snap_time = 1;

            const handleVideoCover = (path, self) => {
                return new Promise((resolve, reject) =>{
                    self.$post('/stuhire_room_series/SeriesVideo/createVideoSnapShot',{
                        file_path: path,
                        snap_time: snap_time
                    },resp=>{
                        if (resp.code == 1) {
                            snap_time = 1;
                            resolve(resp.data.image_url);
                        } else if (resp.code == 0) {
                            snap_time = 2;
                            self.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                });
            };


            if(this.vType === 1) {
                const notice_name = list[0]['name'] + '上传成功';

                list.reduce((cur,next) => {
                    let url = [handleVideoCover(next.video_path, this)].reduce(async (cur2, next) => {
                        return await next;
                    },Promise.resolve()).then(resp => {
                        let video_json = [{
                            video_name: next.name,
                            video_size: next.video_size,
                            video_path: next.video_path,
                            video_ext: next.video_ext,
                            video_cover: resp
                        }];

                        this.$post('/stuhire_room_series/SeriesVideo/addBatch',{
                            series_no: this.series_no,
                            video_json: JSON.stringify(video_json)
                        },resp=>{
                            if (resp.code == 1) {
                                this.getTableData();
                                this.$notify({
                                    title: '提示',
                                    message: notice_name,
                                    type: 'success',
                                    duration: 2000
                                });
                            } else if (resp.code == 0) {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    });
                    return cur;
                },[]);
            }

            if(this.vType === 2) {
                const notice_name = list[0]['name'] + '更新成功';

                list.reduce((cur,next) => {
                    let url = [handleVideoCover(next.video_path, this)].reduce(async (cur2, next) => {
                        return await next;
                    },Promise.resolve()).then(resp => {
                        this.$post('/stuhire_room_series/SeriesVideo/update',{
                            series_no: this.series_no,
                            video_no: this.video_no,
                            video_name: next.name,
                            video_size: next.video_size,
                            video_path: next.video_path,
                            video_ext: next.video_ext,
                            video_cover: resp
                        },resp=>{
                            if (resp.code == 1) {
                                this.getTableData();
                                this.$notify({
                                    title: '提示',
                                    message: notice_name,
                                    type: 'success',
                                    duration: 2000
                                });
                            } else if (resp.code == 0) {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    });
                    return cur;
                },[]);
            }
        },

        /**
         * @description 删除视频
         */
        handleDeleteVideo (row) {
            this.isAll = false;
            this.video_no = row.video_no;//记录id
            this.dialogDelete = true;
        },

        /**
         * @description 确定删除视频
         */
        handleConfirmDeleteVideo () {
            this.$post('/stuhire_room_series/SeriesVideo/delete', {
                series_no: this.series_no,
                video_no: this.video_no
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.dialogDelete = false;
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 阻止默认事件
         */
        stop (row) {
            this.video_no = row.video_no;//记录id
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 4px;
    }
    .header {
        width: 100%;
        .nav {
            width: 100%;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 24px;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
            .nav_title {
                color: rgba(51, 51, 51, 1);
                font-size: 18px;
                font-weight: 500;
            }
            .nav_back {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                cursor: pointer;
                &:hover {
                    color: rgba(24, 144, 255, 1);
                }
            }
        }
        .view {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 24px 35px 4px 35px;
            .view_item {
                width: calc((100% - 79px) / 3);
                display: flex;
                color: rgba(136, 136, 136, 1);
                font-size: 14px;
                align-items: center;
                margin-bottom: 20px;
                .view_content {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    padding-left: 8px;
                }
            }
        }
    }
    .main {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        min-height: 600px;
        .main_title {
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
            height: 66px;
            line-height: 66px;
            box-sizing: border-box;
            padding-left: 24px;
            font-size: 18px;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
        }
        .filter {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 24px;
            // padding-bottom: 24px;
            .filter_left {
                display: flex;
                align-items: center;
                .filter_group_box {
                    width: 270px;
                    display: flex;
                    overflow: hidden;
                }
                .header_box {
                    display: flex;
                    height: 32px;
                    align-items: center;
                    margin-left: 24px;
                    margin-top: 24px;
                    white-space: nowrap;
                    .header_box_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 16px;
                    }
                }
            }
        }
        .__success {
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding-left: 24px;
            // margin-bottom: 24px;
            margin-top: 24px;
        }
        .upload {
            display: flex;
            width: 100%;
            flex: 1;
            overflow: hidden;
            justify-content: center;
            // align-items: center;
            overflow-y: auto;
            ._wrap {
                width: 100%;
                flex: 1;
                // height: calc(100vh - 477px);
                overflow: hidden;
                overflow-y: auto;
                padding: 0 4px 8px 4px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                padding-top: 14px;
                // border: 1px red solid;
                &::-webkit-scrollbar {
                    width: 1px;
                }
                ._item {
                    // width: calc((100% - 80px) / 5);
                    width: 212px;
                    box-sizing: border-box;
                    margin-left: 20px;
                    margin-bottom: 20px;
                    border-radius: 8px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-shadow: 0px 0px 20px 0px rgba(98, 152, 214, 0.2);
                    &:hover {
                        box-shadow: 0px 0px 30px 0px rgba(98, 152, 214, 0.5);
                    }
                    ._item_video {
                        width: 212px;
                        height: 144px;
                        border-radius: 8px 8px 0 0;
                        position: relative;
                        ._item_video_cover {
                            width: 212px;
                            height: 144px;
                            border-radius: 8px 8px 0 0;
                        }
                        ._item_video_play {
                            width: 60px;
                            height: 60px;
                            position: absolute;
                            left: 76px;
                            top: 42px;
                            z-index: 10;
                            cursor: pointer;
                        }
                        .icon_wrap {
                            width: 14px;
                            height: 14px;
                            border-radius: 4px;
                            background-color: #ffffff;
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            box-sizing: border-box;
                            z-index: 10;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            .icon-check_sel {
                                color: rgba(32, 160, 255, 1);
                                font-size: 16px;
                                border-radius: 4px;
                            }
                        }
                        .icon-check_def {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            box-sizing: border-box;
                            z-index: 10;
                            font-size: 16px;
                            color: rgba(0,0,0,.5);
                            background-color: #ffffff;
                            border-radius: 4px;
                            cursor: pointer;
                        }
                    }
                    ._item_title {
                        width: 188px;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        white-space: nowrap;
                    }
                    ._item_info {
                        width: 212px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        box-sizing: border-box;
                        padding: 0 12px;
                        ._item_info_size {
                            color: rgba(153, 153, 153, 1);
                            font-size: 12px;
                        }
                        ._item_info_date {
                           color: rgba(153, 153, 153, 1);
                           font-size: 12px;
                        }
                    }
                    ._item_error_text {
                        width: 188px;
                        height: 38px;
                        color: rgba(245, 158, 51, 1);
                        font-size: 12px;
                        line-height: 18px;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-bottom: 12px;
                    }
                    // 待提审
                    ._item_button {
                        width: 212px;
                        height: 44px;
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        border-top: 1px rgba(240, 242, 245, 1) solid;
                        cursor: pointer;
                        ._item_delete {
                            width: 106px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                            text-align: center;
                            line-height: 44px;
                        }
                        ._item_next {
                            width: 106px;
                            text-align: center;
                            line-height: 44px;
                            color: rgba(24, 144, 255, 1);
                            position: relative;
                            &::before {
                                content: '';
                                position: absolute;
                                width: 1px;
                                height: 20px;
                                background-color: rgba(240, 242, 245, 1);
                                left: 0;
                                top: 12px;
                                z-index: 1;
                            }
                        }
                    }
                    // 待审核
                    ._item_await {
                        width: 212px;
                        height: 44px;
                        display: flex;
                        text-align: center;
                        justify-content: center;
                        line-height: 44px;
                        box-sizing: border-box;
                        border-top: 1px rgba(240, 242, 245, 1) solid;
                        color: rgba(153, 153, 153, 1);
                        font-size: 14px;
                    }
                }
            }
            .upload_data {
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
                line-height: 300px;
            }
        }

        /* 分页 */
        .pagination-wrapper {
            padding-top: 16px;
            padding-bottom: 16px;
            padding-right: 28px;
            padding-left: 28px;
            border-top: 1px rgba(240, 242, 245, 1) solid;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }

    ._batch {
        width: 100%;
        // max-height: 415px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        // overflow: hidden;
        ._batch_header {
            width: 100%;
            height: 66px;
            box-sizing: border-box;
            padding-left: 24px;
            display: flex;
            align-items: center;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
            ._batch_title {
                color: rgba(51, 51, 51, 1);
                font-size: 18px;
                font-weight: 500;
                margin-right: 10px;
            }
            ._bacth_desc {
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
            }
        }
        ._bacth_box {
            margin: 24px;
            // height: calc(100% - 48px - 66px);
            box-sizing: border-box;
            max-height: 300px;
            // flex: 1;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 16px;
            padding-bottom: 16px;
            padding-right: 28px;
            padding-left: 28px;
            border-top: 1px rgba(240, 242, 245, 1) solid;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }

    ._dialog {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        ._dialog_logo {
            width: 48px;
            height: 48px;
        }
        ._dialog_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin: 16px 0;
        }
        ._dialog_desc {
            color: rgba(153, 153, 153, 1);
            font-size: 14px;
            margin-bottom: 28px;
        }
        ._dialog_foot {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: center
        }
    }
}
</style>

<style lang="less">
.uploadInfo {
    .el-radio {
        margin-right: 20px;
    }
    .__dialog {
        .el-dialog__body {
            padding-top: 0px;
        }
    }
    .el-radio-button__inner {
        font-weight: 400;
    }
    .is-active {
        .el-radio-button__inner {
            font-weight: 500;
        }
    }
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: rgba(230, 241, 252, 1);
        color: rgba(32, 160, 255, 1);
        border: 1px rgba(32, 160, 255, 1) solid;
        box-shadow: none;
        border-left: 1px rgba(32, 160, 255, 1) solid;
        animation: initBord .3s linear;
    }
    @keyframes initBord {
        0% {
            border-left: 1px #DCDFE6 solid;;
        }
        100% {
            border-left: 1px rgba(32, 160, 255, 1) solid;
        }
    }
}
</style>